<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件</title>
  <style>
    #div1 {
      width: 400px;
      height: 400px;
      border: 1px solid red;
    }

    #div2 {
      width: 200px;
      height: 200px;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <!-- 
   事件机制:在JavaScript中，事件是以事件流的形式存在的，事件流的顺序分为：捕获和冒泡
   事件执行的顺序  先捕获,在冒泡
    捕获：外 > 内,无法阻止
    冒泡：内 > 外   
  -->
  <div id="div1">
    <div id="div2">

    </div>
  </div>
  
  <ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <script>
    let a = document.querySelector('#div1')
    let b = document.querySelector('#div2')
    // 事件监听器 在JavaScript中，可以使用addEventListener方法，来为元素绑定事件。
    // 事件执行,默认在冒泡阶段,捕获阶段执行,true
    a.addEventListener('click', () => {
      console.log('父--被点击');
    }, true)

    b.addEventListener('click', () => {
      console.log('子--被点击');
    }, true)
    // 移除事件监听器    a.removeEventListener("click")  

    // <!--  事件代理（事件委托）从字面意思理解，委托就是把事情交给别人处理。在JavaScript中，事件委托就是把子元素的事件交给父元素处理。 -->
    const ulE = document.querySelector('#ul')

    ulE.addEventListener('click', function (event) {
      const target = event.target
      if (target.style.backgroundColor !== 'red') {
        target.style.backgroundColor = 'red'
      } else {
        target.style.backgroundColor = '#fff'
      }
    })

  </script>
</body>

</html>